<style lang="stylus">
@import "../style/film.styl"
.film-card
  .film-cover
    background-color #efefef
    width 100%
    height 0
    padding-bottom 150%
    position relative
    img:not([lazy=loading])
      width 100%
      height 100%
      display block
      position absolute
  .film-content
    width 100%
  &.film-card-1
    width calc((100% - 20px) / 3)
    &:not(:nth-child(3n + 1))
      margin-left 10px
  &.film-card-2
    width calc((100% - 10px) / 2)
    &:not(:nth-child(2n + 1))
      margin-left 10px
  &.film-card-3
    min-width 214px
    & + .film-card-3
      margin-left 10px
  &.film-card-4
    width 100%
    &:not(.first)
      width calc((100% - 10px) / 2)
    &:nth-child(2n + 3)
      margin-left 10px
  &.film-card-5
    width 100%
    &.first
      .film-cover
        padding-bottom 56.25%
    &:not(.first)
      width calc((100% - 20px) / 3)
    &:nth-child(3n + 3), &:nth-child(3n + 4)
      margin-left 10px
</style>

<template lang="pug">
.film-card.txt-left.flex.column(:class="['film-card-' + type, index === 0 ? 'first': '']", @click="onItemDispatch(film)")
  .film-cover.relative(:class="{spec: film.data}")
    img(v-lazy="getImage(coverImg)", :class="isLandscape ? 'landscape': 'portrait'")
    template(v-if="film.data")
      .film-tag.absolute(v-if="film.data.recmdTag > 0", :class="VIDEO_LABEL[film.data.recmdTag]")
      .film-remark.absolute(v-if="validRemark", :class="isMovie(film.data) ? 'score': 'set'") {{isMovie(film.data) ? formatScore(film.data.score): (film.data.totalNum === film.data.updateNum? '已完结' + film.data.totalNum + '集': '更新至' +  + film.data.updateNum + '集')}}
  .pdh-20.film-content
    .fz-28.pdt-16.line-clamp-1.bold {{film.title}}
    .fz-24.pdb-30.line-clamp-1.mgt-10.gray-99(v-if="type !== 3") {{film.intro.trim()}}
</template>

<script>
import { VIDEO_LABEL } from '../const'

export default {
  name: 'FilmCard',
  props: {
    film: {
      type: Object,
      default() {
        return {}
      }
    },
    type: {
      type: Number,
      default: 1
    },
    index: {
      type: Number,
      default: 0
    }
  },

  computed: {
    coverImg() {
      // 四张横图、一大四张横图、一大六张竖图的第一张都是横图
      // 上述情况，取displayCover
      const { displayCover, cover } = this.film
      return this.isLandscape ? (displayCover || cover) : (cover || displayCover)
    },

    isLandscape() {
      return this.type === 2 || this.type === 4 || (this.type === 5 && this.index === 0)
    },

    validRemark() {
      if (!this.film.data) {
        return false
      }

      if (this.isMovie(this.film.data)) {
        return this.film.data.score > 0
      }
      return this.film.data.updateNum > 0
    }
  },

  data: () => ({
    VIDEO_LABEL
  })
}
</script>
